<template>
  <view class="short-cut-page">
    <view class="banner">
        <image
          src="../static/images/iphon-banner.png"
          mode="scaleToFill"
          lazy-load="false">
        </image>
    </view>
    <view class="content-input">
      <view class="service-time">服务时间：9:00-21:00</view>
      <view class="service-type service-item">
        <view class="label">服务类型：</view>
        <view>
          	<picker class="picker" @change="productChange" :value="index" :range="array">
                <view class="uni-input">{{array[index]}}</view>
            </picker>
          <image
            src="../static/images/icon_arrow_right.png"
            mode="scaleToFill"
            lazy-load="false">
          </image>
        </view>
      </view>
      <view class="service-num service-item">
        <view class="label">接听手机：</view>
        <view>
          <input class="input" type="number" maxlength="11" placeholder="请输入手机号码" v-model="mobile" @input="getPhoneNum" placeholder-class="placeholder">
        </view>
      </view>
      <view class="service-button" @click="submitBtn">提交</view>
    </view>
    <!-- 评论列表 -->
    <!-- <view class="commont-region">
        <Evaluate/>
    </view> -->
    <view class="message-modal" @touchmove.prevent v-if="isModal">
        <view class="submit-box">
          <view class="icon">
             <image
               src="../static/images/icon_mobile.png"
               mode="scaleToFill"
               lazy-load="false">
             </image>
          </view>
          <view class="tips">
             提交成功
          </view>
          <view class="content">
             <text>顾问助理会在10分钟内联系您\n请保持电话畅通</text>
          </view>
          <view class="submit-btn" @click="cloneModal" >
              确定
          </view>
        </view>
        <view class="mask-box" @touchmove.prevent></view>
    </view>
  </view>
</template>

<script>
import Evaluate from "@/components/evaluate/evaluate.vue";
import Swiper from "@/components/swiper/swiper.vue";
import InterServer from "@/common/config/server";
import API from "@/common/config/config";
import {checkPhoneNumber} from '@/common/js/common'
import Vue from 'vue'
export default {
  components: {
    Evaluate
  },
  data() {
    return {
      isModal:false,
      mobile:'', //电话号码
      index: 0,
      array: ['房产抵押抵款', '车产抵押贷款', '信用贷款', '信用卡'],
      pageNum:0,
      pageSize:20,
    };
  },
  onLoad() {
    },
  onShow(){
    // #ifdef H5
        document.title=`快捷电话`
    // #endif

  },  
  methods: {
    //提交快捷电话
    loanIntent(){
      let loanType=String(this.array[this.index])
      InterServer.loanIntent({
        mobile:this.mobile,
        loanType:this.array[this.index]
      }).then(res=>{
        if(res.code==200){
          this.isModal=true; 
        }
      })
    },
    //获取手机号
    getPhoneNum(e){
      this.mobile=e.detail.value
    }, 
    //获取服务类型
    productChange(e){
      this.index = e.target.value
    },
    //点击提交
    submitBtn(){
       if(checkPhoneNumber(this.mobile))
        this.loanIntent()
    },

    cloneModal(){
      this.isModal=false;
      Vue.customNavigateBack()
      this.mobile=""
    }
  }
};
</script>

<style lang="less" scoped>
uni-page-body{
  height: 100%;
}
.short-cut-page {
  background: #ffffff;
  height: 100%;
  .banner {
    width: 100%;
    height: 320upx;
    image{
        width: 100%;
        height: 100%;
    }
  }
  uni-input input {
    width: 500upx;
  }
  .content-input {
    font-size: 26upx;
    padding: 0 25upx 50upx;
    background: #ffffff;
    margin-bottom: 20upx;
    .label {
      color: #666666;
      font-size: 28upx;
     margin-right: 20upx;
    }
    .service {
      &-time {
        height: 100upx;
        line-height: 100upx;
        color: #999999;
        font-weight: bold;
      }
      &-type{
        height:80upx;
      }
      &-item {
        display: flex;
        align-items: center;
        input{
          border: 1upx solid #dedede;
          width: 520upx;
          height: 80upx;
          border-radius: 10upx;
          padding-left: 20upx;
        } 
        .picker{
          border: 1upx solid #dedede;
          width: 520upx;
          height: 80upx;
          line-height: 80upx;
          border-radius: 10upx;
          padding-left: 20upx;
          height:80upx;

        }
        image{
            width: 12upx;
            height: 21upx;
            position: absolute;
            right: 50upx;
            top: 30upx;
        }
        // .picker{
        //     width: 520upx;
        //     height: 80upx;
        //     line-height: 80upx;
        //     // position: absolute;
        //     // left: 135upx;
        //     // top: 0;
        //     z-index: 99;
        //     // padding-left: 20upx;
        // }
      }
      &-type {
        margin-bottom: 30upx;
        position: relative;
      }
      &-num {
        margin-bottom: 40upx;
        font-weight: none;
      }
      &-button{
          width: 500upx;
          height: 90upx;
          background: #1b65fa;
          font-size: 30upx;
          color: #ffffff;
          text-align: center;
          line-height: 90upx;
          border-radius: 10upx;
          margin: 0 auto;
      }
    }
  }
  .commont-region{
      background: #ffffff;
  }
  .submit-box{
      width: 600upx;
      height: 575upx;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -300upx;
      margin-top: -350upx;
      z-index: 101;
      background: #ffffff;
      border-radius: 20upx;
      text-align: center;
      color: #333333;
      .icon{ 
        margin:60upx 0 35upx;
        image{
          width: 114upx;
          height: 152upx;
        }
      }
      .tips{
        font-size: 34upx;
        font-weight: 600;
      }
      .content{
         font-size: 30upx;
         margin: 20upx 0 70upx;
      }
      .submit-btn{
         background: #2677f9;
         color: #ffffff;
         font-size: 30upx; 
         width: 230upx;
         height: 70upx;
         line-height: 70upx;
         text-align: center;
         border-radius: 10upx;
         margin: 0 auto;
        
      }
      
  }
  .submit-bg{
      image{
          width: 600upx;
          height: 670upx;
      }
  }
  .mask-box{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
  }
}
</style>

